<template>
  <div class="app-container">
    <el-form ref="goodsRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="form.goodsName" placeholder="请输入商品名称"/>
      </el-form-item>
      <el-form-item label="商品类别" prop="goodsType">
        <el-input v-model="form.goodsType" placeholder="请输入商品类别"/>
      </el-form-item>
      <el-form-item label="状态" prop="goodsStatus">
        <el-select
            v-model="form.goodsStatus"
            placeholder="请选择"
            style="width: 100%"
            :filterable="true">
          <el-option v-for="(item, index) in goodsStatusOptions"
                     :key="index"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="一口价(元)" prop="goodsPrice">
        <el-input v-model="form.goodsPrice" placeholder="请输入商品价格"/>
      </el-form-item>
      <el-form-item label="包装费" prop="goodsPackage">
        <el-input v-model="form.goodsPackage" placeholder="请输入商品打包费"/>
      </el-form-item>
      <el-form-item label="商品描述" prop="goodsDesc">
        <el-input v-model="form.goodsDesc" type="textarea" placeholder="请输入内容"/>
      </el-form-item>
      <el-form-item label="商品图片" prop="goodsImage">
        <image-upload v-model="form.goodsImage"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup name="GoodsEdit">
import {getCurrentInstance, ref, reactive, toRefs} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {getGoods, addGoods, updateGoods} from "@/api/order/goods"
import {goodsStatusOptions, formatGoodsStatus} from "@/views/order/goods/utils.js";

const {proxy} = getCurrentInstance()
const route = useRoute()
const router = useRouter()

const data = reactive({
  form: {},
  rules: {
    shopId: [
      {required: true, message: "店铺id不能为空", trigger: "blur"}
    ],
    goodsName: [
      {required: true, message: "商品名称不能为空", trigger: "blur"}
    ]
  }
})

const {form, rules} = toRefs(data)

// 初始化数据
if (route.params.id) {
  // 编辑模式
  getGoods(route.params.id).then(response => {
    form.value = response.data
  })
} else {
  // 新增模式
  resetForm()
}

function resetForm() {
  form.value = {
    goodsId: null,
    shopId: null,
    goodsType: null,
    goodsDesc: null,
    goodsCreateTime: null,
    goodsName: null,
    goodsImage: null,
    goodsPrice: null,
    goodsPackage: null,
    goodsStatus: null,
    recommend: null,
    stock: null,
    number: null
  }
}

/** 提交按钮 */

function submitForm() {
  proxy.$refs["goodsRef"].validate(valid => {
    if (valid) {
      if (form.value.goodsId != null) {
        updateGoods(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          router.push('/goodsManagement/goods')
        })
      } else {
        addGoods(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          router.push('/goodsManagement/goods')
        })
      }
    }
  })
}

function cancel() {
  router.push('/goodsManagement/goods')
}
</script>